<template>
	<view style="width: 100%;">
		<!-- 搜索 -->
		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="goConfirm" v-model="search_text"/>
				<view class="search__box__content" v-if="!search_text">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>搜索</text>
					</view>
				</view>
				<view class="search__box__icon" @click="reset">
					<image class="search__box__icon__img" v-if="search_text" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="nav-area">
			<scroll-view class="tab-scroll" scroll-x show-scrollbar scroll-with-animation>
				<view class="tab-scroll__box" @click="changeAllTab()" :style="is_all_tab?'background-color: rgba(49,114,182,1);color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(49,114,182,0.5);':'color: #333333;box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);'">
					<view class="tab-scroll__box__content">
						<view class="tab-scroll__box__content__icon">
							<image class="tab-scroll__box__content__icon__img":src="is_all_tab?'/static/icon/menu_active.png':'/static/icon/menu.png'" mode=""></image>
						</view>
						<view class="">
							<text style="font-size: 24rpx;">全部</text>
						</view>
					</view>
				</view>
				<view class="tab-scroll__box" @click="changeTab(index)" v-for="(item, index) in list" :key='index' :style="is_tab == index?'background-color: rgba(49,114,182,1);color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(49,114,182,0.5);':'color: #333333;box-shadow: 0px 2px 4px 0px rgba(215,215,215,0.5);'">
					<view class="tab-scroll__box__content">
						<view  class="tab-scroll__box__content__icon">
							<image class="tab-scroll__box__content__icon__img" :src="is_tab == index?item.logoShow:item.logo" mode=""></image>
						</view>
						<view class="">
							<text style="font-size: 24rpx;">{{item.title}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 排名区 -->
		<view style="width: 100%;">
			<view class="rank">
				<view class="rank__men" :class="is_man == 0?'title-active':'title'" @click="changeMan">
					<text>按人气</text>
				</view>
				<view class="rank__time" :class="is_man == 1?'title-active':'title'" @click="changeTime">
					<text>按时间</text>
				</view>
			</view>
			<view class="rank-content">
				<view class="rank-content__kong" v-if="rank.length == 0">
					<image class="rank-content__kong__img" src="/static/icon/kong_icon_bg.png" mode=""></image>
					暂无服务
				</view>
				<view class="rank-content__main" v-if="rank.length != 0" v-for="(item, index) in rank" :key="index">
					<view class="rank-content__main__box">
						<image class="rank-content__main__box__img" v-if="is_man == 0 && index <= 2" :src="index == 0?'/static/icon/fuwu_icon_01.png':index == 1?'/static/icon/fuwu_icon_02.png':index == 2?'/static/icon/fuwu_icon_03.png':''" mode=""></image>
						<view class="rank-content__main__box__num" v-if="is_man == 1 || index > 2" >{{index + 1}}</view>
						<image class="rank-content__main__box__logo" :src="item.logo" mode=""></image>
						<view class="rank-content__main__box__type">
							<text class="rank-content__main__box__type__text">{{item.title}}</text>
							<view class="rank-content__main__box__type__content">
								<text class="rank-content__main__box__type__content__item" :style="item.typeName == '学习类'?'background-color: #FFFFFF;':item.typeName == '工作类'?'background-color: #FFFFFF;':item.typeName == '生活类'?'background-color: #FFFFFF;':item.typeName == '社交类'?'background-color: #FFFFFF;':''">{{item.typeName}}</text>
								<image class="rank-content__main__box__type__content__img" v-if="index<3&&is_man == 0" src="/static/icon/drawable-xhdpi_fuwu_icon_fire.png" mode=""></image>
								<text class="rank-content__main__box__type__content__num">{{is_man == 0?'人气&nbsp' + item.addNum :'&nbsp' + item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="rank-content__main__button" @click="addService(item.id,index)" v-if="!item.add">
						<text class="rank-content__main__button__text" >+</text>
						<text class="rank-content__main__button__text" >添加</text>
					</view>
					<view @click="removeServe(item.id,index)" style="width: 138rpx;height: 60rpx;border-radius: 14rpx;border:1rpx solid rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;" v-else >
						<text style="font-size: 28rpx;color: rgba(49,114,182,1);" >已添加</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'utils/moment.min.js'
	
	export default {
		data() {
			return {
				search_text: '', //搜索字段
				is_tab: 99, //选中图标
				is_all_tab: true,
				list: [], //服务类型列表
				is_man: 0, //选中排序
				rank: [], //排序后列表
			}
		},
		onLoad() {
			let self = this
			self.init()
			uni.$on('serve_info', function() {
				self.init()
			})
		},
		methods: {
			async init() {//初始化
				await this.getTypeList() ? this.getServeGetList() : '';
			},
			//类型列表
			getTypeList() {
				let self = this
				return new Promise((resolve, reject)=> {
					//服务类型
					self.$api.fAppServGetTypeList().then((res) => {
						self.list = res.data && res.data.result || []
						resolve(true)
					})
				})
			},
			/**
			 * @name 服务列表
			 * @param {Object} id 标识
			 * @param {Object} 名字
			 */
			getServeGetList(id,title) {
				let self = this
				self.$api.fAppServeGetList({
					typeId: id,
					title: title,
				}).then((res) => {
					// console.log(res.data.result)
					self.rank = res.data && res.data.result || []
					self.rank.forEach((item, index) => {
						item.createTime = moment(item.createTime).format('YYYY.MM.DD');
					})
					self.sortList()
				})
			},
			/**
			 * @name 排序
			 */
			sortList() {
				let rankFake = this.rank
				if(this.is_man == 0) {
					rankFake.sort((a, b) => b.addNum - a.addNum)
				}
				if(this.is_man == 1) {
					rankFake.sort(function(aTime, bTime) {
						return aTime.createTime < bTime.createTime ? 1 : -1;
					});
				}
				this.rank = rankFake
			},
			/**
			 * @name 服务类型
			 * @param {Object} index  序号
			 */
			changeTab(index) {
				this.is_tab = index
				this.is_all_tab = false
				this.search_text = ''
				this.getServeGetList(this.list[index].id)
			},
			/**
			 * @name 搜索
			 */
			goConfirm() {
				this.is_all_tab = false
				this.is_tab = 99
				this.getServeGetList('',this.search_text)
			},
			/**
			 * @name 全部标签
			 */
			changeAllTab() {
				this.is_all_tab = true
				this.is_tab = 99
				this.search_text = ''
				this.getServeGetList()
			},
			/**
			 * @name 人气排序
			 */
			changeMan() {
				this.is_man = 0
				this.sortList()
				
			},
			/**
			 * @name 时间排序
			 */
			changeTime() {
				this.is_man = 1
				this.sortList()
			},
			/**
			 * @name 添加服务
			 */
			addService(id,index) {
				let self = this
				self.$api.fappServeAddServe({
					serveId: id,
				}).then((res) => {
					console.log('添加成功')
					self.rank[index].add = true
					uni.$emit('index_serve')
				}).catch(e => {console.log(e)})
			},
			/**
			 * @name 移除服务
			 * @param {type} id 
			 * @param {type} index 
			 */
			removeServe(id,index) {
				let self = this
				self.$api.fAppServeRemoveServe({
					serveId: id,
				}).then((res) => {
					console.log('移除成功')
					self.rank[index].add = false
					uni.$emit('index_serve')
				}).catch(e => {console.log(e)})
			},
			/**
			 * @name 重置搜索
			 */
			reset() {
				this.search_text = ''
			},
		}
	}
</script>

<style lang="less">
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	
	.nav-area{
		width: 100%;
		height: 120rpx;
		margin-top: 30rpx;
	}
	.rank {
		width: 80%;height: 66rpx;border: 2rpx solid rgba(166,166,166,1);margin: 30rpx 10%;border-radius: 33rpx;display: flex;align-items: center;justify-content: center;
		&__men {
			display: flex;align-items: center;justify-content: center;
		}
		&__time {
			display: flex;align-items: center;justify-content: center;
		}
	}
	.rank-content {
		width: 93.1%;padding: 0 24rpx;margin-top:12rpx;
		&__kong {
			width: 93.1%;display: flex;align-items: center;flex-direction: column;position: fixed;top: 46%;
			&__img {
				width: 422rpx;height: 298rpx;
			}
		}
		&__main {
			width: 100%;margin-bottom: 6rpx;border-bottom: 2rpx solid rgba(248,248,248,1);display: flex;align-items: center;justify-content: space-evenly;
			&__box {
				width: 100%;margin: 28rpx 0 22rpx 0;display: flex;align-items: center;
				&__img {
					width: 40rpx;height: 36rpx;
				}
				&__num {
					width: 40rpx;height: 36rpx;display: flex;align-items: center;justify-content: center;font-size: 36rpx;
				}
				&__logo {
					width: 76rpx;height: 76rpx;margin-left: 22rpx;
				}
				&__type {
					margin-left: 16rpx;display: flex;flex-direction: column;
					&__text {
						font-size: 30rpx;color: rgba(51,51,51,1);
					}
					&__content {
						display: flex;margin-top: 8rpx;align-items: center;
						&__item {
							height: 26rpx;font-size: 24rpx;padding: 0 8rpx; color: rgba(49,114,182,1);border: 1rpx solid rgba(49,114,182,1);border-radius: 13rpx;display: flex;align-items: center;justify-content: center;
						}
						&__img {
							width: 22rpx;height: 22rpx;margin-left: 12rpx;
						}
						&__num {
							font-size: 24rpx;color: rgba(102,102,102,1);margin-left: 8rpx;
						}
					}
				}
			}
			&__button {
				width: 138rpx;height: 60rpx;border-radius: 14rpx;background-color: rgba(49,114,182,1);display: flex;align-items: center;justify-content: space-evenly;
				&__text {
					font-size: 28rpx;color: #FFFFFF;
				}
			}
		}
	}
	.tab-scroll {
		width: 95.6%;
		height: 120rpx;
		white-space: nowrap;
		margin-left: 28rpx;
		&__box {
			display: inline-block;width: 126rpx;height: 114rpx;border-radius: 14rpx;margin-right: 13rpx;
			&__content {
				width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
				&__icon {
					width: 40rpx;height: 40rpx;
					&__img {
						width: 40rpx;height: 40rpx;border-radius: 0rpx;
					}
				}
			}
		}
	}
	
	.title {
		width: 50%;
		height: 66rpx;
		font-size: 26rpx;
		color: rgba(102,102,102,1);
	}
	
	.title-active {
		width: 50%;
		height: 66rpx;
		font-size: 26rpx;
		border-radius: 33rpx;
		color: rgba(255,255,255,1);
		background-color: rgba(49,114,182,1);
		border: 2rpx solid rgba(49,114,182,1);
	}
	
</style>
